<template>
  <div class="section-catalog">
    <div class="content_sides">
      <div class="content_side content_side__left">
        <div class="main_title_wrapper">
          <div class="main_subtitle">{{ subtitle }}</div>
          <div class="main_title">{{ title }}</div>
          
          <div class="title_description">
            <a :href="pdfUrl" class="catalog-pdf" download="AF-tech-catalog.pdf">
              <img src="@/assets/images/icons/pdf_ico.svg" alt="PDF" class="pdf-icon">
              下载PDF格式目录
            </a>
          </div>
        </div>
        
        <NextButton v-if="showNextButton" @click="$emit('next')" />
      </div>
      
      <div class="content_side content_side__right">
        <div class="catalog_blocks standart_border">
          <CatalogItem
            v-for="item in catalogItems"
            :key="item.id"
            :id="item.id"
            :title="item.title"
            :image="item.image"
            :description="item.description"
            :link="item.link"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CatalogItem from './CatalogItem.vue';
import NextButton from './NextButton.vue';

// 导入PDF文件
import pdfUrl from '@/assets/pdf/2020-11-12_AF-tech-tvv-1.pdf?url';

// 导入目录图片
import group1 from '@/assets/images/category/Group-1.svg';
import group2 from '@/assets/images/category/Group-2.svg';
import group from '@/assets/images/category/Group.svg';
import klapany from '@/assets/images/category/klapany.svg';
import moyka from '@/assets/images/category/moyka.svg';

interface CatalogItemType {
  id: string;
  title: string;
  image?: string;
  description?: string;
  link?: string;
}

defineProps<{
  subtitle: string;
  title: string;
  showNextButton?: boolean;
}>();

defineEmits<{
  (e: 'next'): void;
}>();

// 目录数据 - 参考原网站的顺序和图片映射
const catalogItems: CatalogItemType[] = [
  {
    id: '01',
    title: '不锈钢管道',
    image: group2,
    description: '',
    link: '/catalog/01'
  },
  {
    id: '02',
    title: '管道阀门和配件',
    image: group2,
    description: '',
    link: '#'
  },
  {
    id: '03',
    title: '板式热交换器',
    image: group,
    description: '',
    link: '#'
  },
  {
    id: '04',
    title: '储罐清洗设备',
    image: moyka,
    description: '',
    link: '#'
  },
  {
    id: '05',
    title: '阀门',
    image: klapany,
    description: '',
    link: '#'
  },
  {
    id: '06',
    title: '泵',
    image: group1,
    description: '',
    link: '#'
  }
];
</script>

<style scoped>
.section-catalog {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.content_sides {
  width: 100%;
  max-width: 150rem;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  animation: fadeIn 0.8s ease-out;
}

.content_side__left {
  width: 40%;
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main_title_wrapper {
  margin-bottom: 4rem;
}

.main_subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main_title {
  font-size: 7.2rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.title_description {
  margin-top: 3rem;
}

/* PDF下载按钮 */
.catalog-pdf {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  padding: 1rem 4rem 1rem 1rem;
  opacity: 0.8;
  text-decoration: none;
  font-size: 1.6rem;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.catalog-pdf:hover {
  opacity: 1;
  color: #e58707;
}

.pdf-icon {
  width: 3rem;
  height: 3rem;
  filter: brightness(0) saturate(100%) invert(100%);
  transition: all 0.3s ease-in-out;
}

.catalog-pdf:hover .pdf-icon {
  filter: brightness(0) saturate(100%) invert(53%) sepia(94%) saturate(1461%) hue-rotate(4deg) brightness(96%) contrast(93%);
}

.content_side__right {
  width: 60%;
  display: flex;
}

.catalog_blocks {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* 响应式 */
@media (max-width: 1024px) {
  .content_sides {
    padding: 0 2rem;
    gap: 3rem;
  }
  
  .main_title {
    font-size: 6rem;
  }
}

@media (max-width: 768px) {
  .content_sides {
    flex-direction: column;
    padding: 2rem 1.5rem;
  }
  
  .content_side__left {
    width: 100%;
    min-width: auto;
    padding-right: 0;
    margin-bottom: 4rem;
  }
  
  .content_side__right {
    width: 100%;
  }
  
  .main_title {
    font-size: 5rem;
  }
  
  .main_title_wrapper {
    margin-bottom: 3rem;
  }
  
  .catalog_blocks {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .main_title {
    font-size: 3.4rem;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

